<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">用户权限demo
      <span class="text-subtitle1">此页面用于展示几个新的多用户权限判断方法</span>
    </div>
    <div class="shadow-2">
      <form-field-group title="多权限满足其一">
        <div class="q-pa-sm">
          <div class="row q-gutter-sm">
            <div class="col12">
              此demo会获取当前用户所拥有的权限(管理员默认拥有所有权限),下方checkbox勾选的权限会作为参数传入下方四个方法中,hasRightsOr与hasModifyRightsOr
              的返回值为当前用户是否包含勾选权限的其中一个,若包含则返回true,hasRightsAnd和hasModifyRightsAnd的返回值为当前用户权限是否包含
              所有勾选的权限,若有一个不满足则返回false
            </div>
            <q-separator/>
            <div class="col-12 q-mb-sm">
              <span>包含权限：</span>
              <q-checkbox dense class="q-mx-md"
                v-model="rights" val='Comm.UserMgr.View' label="Comm.UserMgr.View" />
              <q-checkbox dense class="q-mx-md"
                v-model="rights" val='Comm.UserMgr.Edit' label="Comm.UserMgr.Edit" />
              <q-checkbox dense class="q-mx-md"
                v-model="rights" val='Comm.RoleRight.View' label="Comm.RoleRight.View" />
              <q-checkbox dense class="q-mx-md"
                v-model="rights" val='blablabla' label="blablabla" />
              <q-checkbox dense class="q-mx-md"
                v-model="rights" val='xxxxxxx' label="xxxxxx" />
            </div>
            <div class="col-12 q-mb-sm">
              <span>传参内容: {{rightsStr}}</span>
            </div>
            <div class="col-12 q-mb-sm">
              <span>用户当前拥有的权限: {{fx.rr.value.rightKeys}}</span>
            </div>
            <div class="col-12">
              <span>fx.hasRightsOr返回值： {{fx.hasRightsOr(...rights)}}</span>
            </div>
            <div class="col-12">
              <span>fx.hasModifyRightsOr返回值: {{fx.hasModifyRightsOr(...rights)}}</span>
            </div>
            <div class="col-12">
              <span>fx.hasRightsAnd返回值: {{fx.hasRightsAnd(...rights)}}</span>
            </div>
            <div class="col-12">
              <span>fx.hasModifyRightsAnd返回值: {{fx.hasModifyRightsAnd(...rights)}}</span>
            </div>
          </div>
        </div>
      </form-field-group>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'RightsDemo'
}
</script>

<script lang="ts" setup>

import FormFieldGroup from 'src/lib/components/FormFieldGroup.vue'
import {computed, ref} from 'vue'
import _ from 'lodash'

let rights = ref([])

let rightsStr = computed(() => {
  return _.join(rights.value, ',')
})

const fx = $f
</script>

<style scoped>

</style>
